<template>
  <div>
    <div class="ys-wrap page-login pt-160 row">
      <div class="login-ad mt-35 col-12">
        <img src="../assets/img/banner.png" alt="" />
      </div>
      <div class="login-form col-12">
        <div class="ys-logo mb-30 text-c"></div>
        <ul class="w-330">
          <li class="border-b pt-8 pb-8 mb-10 pos-r">
            <i class="ico ico-user pos-r t-2"></i>
            <input type="text" class="ml-10 f-14 lh-20 c-333" v-model="params.username" placeholder="用户名" />
          </li>
          <li class="border-b pt-8 pb-8 mb-10 pos-r">
            <i class="ico ico-pass pos-r t-2"></i>
            <input type="text" class="ml-10 f-14 lh-20 c-333" v-model="params.roomid" placeholder="密码"
              @keyup.enter="toLogin" />
          </li>
          <li class="mt-21">
            <input type="submit" @click="toLogin" class="btn-block f-16 c-fff lh-22" value="登录" />
          </li>
        </ul>
      </div>
    </div>
    <footer class="ys-footer">
      <p class="f-13 c-a1a3aa text-c">
        &copy;
        <a href="http://www.xxx.xxx" class="mr-5" target="_blank" title="chanyue">www.xxxx.xxx</a>
        后台系统 ● 位于西京 服务全国
      </p>
    </footer>
  </div>
</template>

<script lang="ts">
import { pomelo } from "../client";
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "login-in",
  data: () => {
    return {
      svg: "",
      code: "",
      params: {
        username: "",
        roomid: "",
      },
    };
  },
  computed: {
  },
  mounted() {
    console.log("Component mounted");
  },
  methods: {
    async queryEntry(callback: (arg0: any, arg1: any) => void) {
      var route = 'gate.gateHandler.queryEntry';
      pomelo.init({
        host: "127.0.0.1",
        port: 3014,
        log: true,
      }, () => {
        pomelo.request(route, {
          uid: this.params.username,
        }, function (data: { code: number; host: any; port: any; }) {
          pomelo.disconnect();
          if (data.code === 500) {
            ElMessage({
              message: "登录错误",
              type: "error",
            });
            return;
          }
          callback(data.host, data.port);
        });
      });
    },
    //校验
    validate() {
      var reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;
      if (this.params.username.length == 0) {
        ElMessage({
          message: "请输入用户名",
          type: "warning",
        });
        return false;
      }
      if (this.params.roomid.length == 0) {
        ElMessage({
          message: "请输入房间号码",
          type: "warning",
        });
        return false;
      }
      if (this.params.username.length > 20) {
        ElMessage({
          message: "用户名不能大于20个字符",
          type: "warning",
        });
        return false;
      }
      if (this.params.roomid.length == 0) {
        ElMessage({
          message: "请输入房间号码",
          type: "warning",
        });
        return false;
      }
      if (this.params.roomid.length > 20) {
        ElMessage({
          message: "房间号码不能大于20个字符",
          type: "warning",
        });
        return false;
      }
      if (!reg.test(this.params.username)) {
        ElMessage({
          message: "用户名不能包含特殊字符",
          type: "warning",
        });
        return false;
      }
      if (!reg.test(this.params.roomid)) {
        ElMessage({
          message: "房间号不能包含特殊字符",
          type: "warning",
        });
        return false;
      }
      return true;
    },

    //登录
    async toLogin() {
      let val = this.validate();
      if (val) {
        let ret = await this.queryEntry((host, port) => {
          console.warn("初始化的接口", host, port)
          pomelo.init({
            host: host,
            port: port,
            log: true
          }, () => {
            var route = "connector.entryHandler.enter";
            pomelo.request(route, {
              username: this.params.username,
              rid: this.params.roomid
            }, (data: {code:number;users:string[]}) => {
              console.log("登录成功", data);
              if (data.code === 500) {
                ElMessage({
                  message: "进入房间错误",
                  type: "error",
                });
                return;
              }
              this.$router.push({ name: "chat", params: { username: this.params.username, roomid: this.params.roomid } });
            });
          });
        })
      }
    },
  },
});
</script>
<style scoped>
.ys-logo {
  margin-top: 140px;
}

.ys-wrap {
  height: calc(100vh - 80px);
  min-height: 540px;
}

.ys-footer {
  height: 80px;
}

.page-login {
  width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.login-ad img {
  max-width: 390px;
  max-height: 340px;
}

.login-form {
  padding-left: 140px;
}

.login-form input::-webkit-input-placeholder {
  font-family: "microsoft yahei";
  color: #bfc3d2;
}

.captcha {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.code {
  height: 32px;
  border-bottom: 1px solid #ddd;
  padding-left: 10px;
  width: 140px;
}

.see {
  color: #337ecc;
  cursor: pointer;
}

.c-a1a3aa {
  color: #a1a3aa;
}

.btn-block {
  display: block;
  text-align: center;
  position: relative;
  width: 100%;
  padding-top: 12px;
  padding-bottom: 12px;
  color: #fff;
  background: #5b82ff;
  box-shadow: 0 0 8px 0 rgba(91, 130, 255, 0.5);
  border-radius: 25px;
  cursor: pointer;
}

.btn-block:hover {
  background-color: rgb(103, 141, 253);
  cursor: pointer;
}

.ico {
  width: 16px;
  height: 16px;
  display: inline-block;
}

.ico-user {
  background-image: url("../assets/img/ico-user.png");
  background-size: cover;
}

.ico-pass {
  background-image: url("../assets/img/ico-pass.png");
  background-size: cover;
}

.pt-160 {
  padding-top: 16vh;
}

.w-130 {
  width: 130px;
}
</style>